<template>
	<div>
  <!-- :city="city" -->
		<HomeHeader></HomeHeader>
		<HomeSwiper :list="swiperList"></HomeSwiper>
		<HomeIcons :list="iconsList"></HomeIcons>
		<HomeRecommend :list="recommendList"></HomeRecommend>
		<HomeWeekend :list="weekendList"></HomeWeekend>
	</div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
export default {
  name: 'Home',
  components: {
  	HomeHeader,
  	HomeSwiper,
  	HomeIcons,
  	HomeRecommend,
  	HomeWeekend
  },
  data () {
  	return {
      lastCity: '',
  		// city: '',
  		swiperList: [],
  		iconsList: [],
  		recommendList: [],
  		weekendList: []
  	}

  },
  methods: {
  	// 初始化页面数据
  	getHomeInfo () {
 				// 请求 数据
 				axios.get('/api/index.json?city='+this.city)
 				.then(this.getHomeInfoSucc)
  	},
  	getHomeInfoSucc (res) {
  		res = res.data
  		if(res.ret && res.data){
  			const data = res.data
  			// this.city = data.city
  			this.swiperList = data.swiperList
  			this.iconsList = data.iconList
  			this.recommendList = data.recommendList
  			this.weekendList = data.weekendList
  		}
  	}

  },
  computed: {

    // 将vuex 里的数据 映射到 计算属性里  映射的city 
    ...mapState(['city'])
  },
  /*生命周期函数*/
  mounted () {
    //保存上一次选择的城市
    this.lastCity = this.city 
  	/*页面已经挂载 并且 整个 生命周期内 只执行一次*/
  	this.getHomeInfo()

  },
  //缓存页面的生命周期  一般情况下 这个生命
  activated () {
    if(this.lastCity !== this.city){
      //保存上一次选择的城市
      this.lastCity = this.city 
      this.getHomeInfo()
    }

  }
}
</script>
<style lang="stylus" scoped>
</style>
